<script setup lang="ts">
import {useRouter} from 'vue-router';
const router = useRouter();
const toHome = ()=>{
  router.push('/home');
}
</script>

<template>
  <div class="top">
    <div class="left">
      <span class="left-text" @click="toHome">首页</span>
    </div>
    <div class="middle">
      <div class="title">智慧旅游数据展示平台</div>
    </div>
    <div class="right">
      <span class="right-text">统计报告</span>
      <span class="current-time">当前时间：2024年1月15日20:39:34</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.top {
  width: 100%;
  height: 40px;
  display: flex;
  background-color: red;

  .left {
    flex: 1.5;

    .left-text {
      float: right;
      width: 150px;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
      font-size: 20px;
    }
  }

  .middle {
    flex: 2;

    .title {
      width: 100%;
      height: 74px;
      text-align: center;
      line-height: 74px;
      color: #29fcff;
      font-size: 30px;
    }
  }

  .right {
    flex: 1.5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .right-text {
      width: 150px;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
      font-size: 20px;
    }

    .current-time {
      text-align: center;
      line-height: 40px;
      color: #29fcff;
      font-size: 17px;
    }
  }
}
</style>